<template>
  <!-- 底部tabbar -->
  <div
    id="tabbar"
    :style="type === 'article' ? 'background: white' : 'background: black'"
  >
    <!-- 快速发送评论 -->
    <div class="tabarItem" style="float: left">
      <div class="shortComment" @click="quickComment()">点击发送评论</div>
      <!-- 评论评论 -->
      <input-comment
        :toShow="showCommentInput"
        :target="null"
        :target_said="null"
        :has_img="true"
        @commentClose="closeComment()"
        @commentSubmiit="getSubmiitedComment"
      ></input-comment>
    </div>
    <!-- 喜欢按钮 -->
    <div class="tabarItem">
      <van-icon
        v-show="!isLike"
        name="like-o"
        :color="type === 'article' ? 'black' : 'white'"
        size="24px"
        @click="likeFn"
      />
      <van-icon
        v-show="isLike"
        name="like"
        color="red"
        size="24px"
        @click="likeFn"
      />
      <span>{{ likeNum }}</span>
    </div>
    <!-- 评论区 -->
    <div class="tabarItem">
      <van-icon
        name="chat-o"
        :color="type === 'article' ? 'black' : '#ffffff'"
        size="24px"
        @click="onShow()"
      />
      <span>{{ commentNum }}</span>
    </div>
    <!-- 点击查看子评论的弹出面板 -->
    <div id="comment-popup">
      <van-popup
        :show="showComment"
        position="bottom"
        :style="{ height: '75%' }"
        bind:close="onClose"
        :round="true"
        :close-on-click-overlay="true"
      >
        <div id="popup-head">
          <p>评论</p>
          <van-icon
            name="cross"
            @click="onClose"
            id="close-popup"
            size="25px"
          />
        </div>
        <ul id="popup-ul">
          <li v-for="(item, index) in comment_items" :key="index">
            <post-item
              v-if="item.avatar != null"
              :comment_content="item.content"
              :comment_name="item.name"
              :comment_time="getTimeBefore(item.time)"
              :comment_userimg="item.avatar.avatar"
              :comment_index="item.index"
              :comment_children="item.children"
              :comment_position="index"
              :comment_like="item.like"
              :comment_liked="item.liked"
              :comment_imgs="item.img"
              @addChild="addChild"
              @changeLike="changeLike"
            >
            </post-item>
          </li>
        </ul>
        <footer>
          <post-footer @addMain="addMain"></post-footer>
        </footer>
      </van-popup>
    </div>
  </div>
</template>
<script>
import CommentItem from "@/components/CommentModuleCommponents/PostCommentItem.vue";
import PostFooter from "@/components/CommentModuleCommponents/PostFooter.vue";
import Comment from "@/components/CommentModuleCommponents/Comment.vue";
import { getVideoComment, addVideoComment } from "@/api/commentAPI";
import { getLikeForFind, clickLike, changeLike } from "@/api/FindModuleAPI/findLike.js";
import { Toast, Popup, Icon } from "vant";
import { cancelPromise } from "@/utils/cancelPromise.js";
import { formatTime } from "@/utils/formatTime";
import { showStatusTip } from "@/utils/loginStatus.js";

export default {
  //点赞数量、是否为点赞状态、id值
  props: ["video_id", "type"],
  components: {
    [Toast.name]: Toast,
    [Popup.name]: Popup,
    [Icon.name]: Icon,
    "post-item": CommentItem,
    "post-footer": PostFooter,
    "input-comment": Comment,
  },
  data() {
    return {
      //是否展示评论
      showComment: false,
      //评论
      comment_items: [],
      //所有点赞的列表
      like_items: [],
      //点击快速评论弹出评论输入
      showCommentInput: false,
      //评论数目
      commentNum: 0,
      //喜欢数目
      likeNum: 0,
      //当前用户是否已经点赞
      isLike: false,
    };
  },
  methods: {
    //格式化时间
    getTimeBefore(time) {
      const str = formatTime(time);
      let minute = 0;
      return minute >= 0 ? str : 0;
    },
    //打开评论区
    onShow() {
      this.$emit("openComment");
      this.showComment = true;
    },
    //关闭评论区
    onClose() {
      this.$emit("closeComment");
      this.showComment = false;
    },
    quickComment() {
      if (sessionStorage.getItem("username") == null) {
        showStatusTip(null, "\n无法评论");
      } else if (
        sessionStorage.getItem("username") != null &&
        sessionStorage.getItem("visitor") == "true"
      ) {
        showStatusTip(null, "无法评论");
      } else {
        this.$emit("openComment");
        this.showCommentInput = true;
      }
    },
    closeComment() {
      this.$emit("closeComment");
      this.showCommentInput = false;
    },
    getSubmiitedComment(to, content, images) {
      this.addMain(content, images);
      this.showCommentInput = false;
    },
    //点赞按钮
    async likeFn() {
      if (sessionStorage.getItem("visitor") == "true") {
        showStatusTip(null, "\n无法点赞");
      } else {
        let res = await cancelPromise.throttle(
          clickLike({
            id: this.video_id,
            username: sessionStorage.getItem("username"),
          })
        );
        if (!res) return;
        if (res.success) {
          this.likeNum = res.likeNum;
          this.isLike = res.isLike;
          Toast.success({
            message: this.isLike ? "点赞成功♥" : "取消点赞!",
            forbidClick: true,
            duration: 1000,
          });
        }
      }
    },
    //添加子评论
    addChild(it_to, content, pos) {
      const add = async () => {
        const data = await addVideoComment({
          toId: this.video_id,
          username: sessionStorage.getItem("username"),
          info: content,
          info_img: [],
          isChild: 1,
          told_main: it_to,
        });

        this.comment_items = data.result;
        this.commentNum = data.count;
      };
      add();
    },
    //添加评论
    addMain(content, images) {
      console.log(this.video_id);
      const addmain = async () => {
        const data = await addVideoComment({
          toId: this.video_id,
          username: sessionStorage.getItem("username"),
          info: content,
          info_img: images,
          isChild: 0,
          told_main: null,
        });

        this.comment_items = data.result;
        this.commentNum = data.count;
      };
      addmain();
    },
    //评论点赞或者取消点赞
    changeLike(index, pos) {
      if (sessionStorage.getItem("username") == null) {
        showStatusTip(null, "\n无法点赞");
      } else if (
        sessionStorage.getItem("username") != null &&
        sessionStorage.getItem("visitor") == "true"
      ) {
        showStatusTip(null, "无法点赞");
      } else {
        const change = async () => {
          const data = await changeLike({
            user_name: sessionStorage.getItem("username"),
            comment_id: index,
          });
          let back = data.back;
          //根据返回结果判断是点赞还是取消点赞，然后找到对应的评论在本地改变数字，不用重新获取一遍了
          if (index == this.comment_items[pos].index) {
            if (back == 1) {
              this.comment_items[pos].like += 1;
            } else {
              this.comment_items[pos].like -= 1;
            }
          }
          for (let i = 0; i < this.comment_items[pos].children.length; i++) {
            if (index == this.comment_items[pos].children[i].index) {
              if (back == 1) {
                this.comment_items[pos].children[i].like += 1;
              } else {
                this.comment_items[pos].children[i].like -= 1;
              }
            }
          }
        };
        change();
      }
    },
    async getComment(params) {
      const data = await getVideoComment(params);
      if (data.result != null) {
        this.comment_items = data.result;
        this.like_items = data.likes;
        this.commentNum = data.count;
        //对当前用户是否点赞给每个评论打标签
        for (let j = 0; j < this.like_items.length; j++)
          for (let i = 0; i < this.comment_items.length; i++) {
            if (this.comment_items[i].index == this.like_items[j].comment_id) {
              this.comment_items[i].liked = true;
            }
            for (let k = 0; k < this.comment_items[i].children.length; k++) {
              if (
                this.comment_items[i].children[k].index ==
                this.like_items[j].comment_id
              ) {
                this.comment_items[i].children[k].liked = true;
              }
            }
          }
        this.commentNum = this.comment_items.length;
      }
    },
  },
  async created() {
    console.log(this.video_id);
    let params = {
      post_id: this.video_id,
      username: sessionStorage.getItem("username"),
    };
    const res = await getLikeForFind(params);
    if (res.success) {
      console.log(res);
      this.likeNum = res.likeNum;
      this.isLike = res.isLike;
    }
    await this.getComment(params);
  },
};
</script>
<style lang="less" scoped>
#tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  overflow: hidden;
  .tabarItem {
    float: right;
    font-size: 18px;
    margin: 5px;
    span {
      padding: 2px 4px;
    }
  }
  .shortComment {
    float: left;
    height: 22px;
    width: 150px;
    line-height: 22px;
    font-size: 14px;
    background-color: #f1f1f1;
    border-radius: 15px;
    padding: 0 8px;
    margin-left: 10px;
    color: black;
  }
  #comment-popup {
    color: black;
    max-height: 500px;
    #popup-head {
      display: flex;
      height: 50px;
      margin: 0px;
      position: fixed;
      background-color: #f5f5f5;
      width: 100%;
      z-index: 999;
      border-radius: 16px 16px 0px 0px;
      p {
        margin-top: 10px;
        padding: 0px;
        margin-left: 160px;
        font-size: 20px;
        font-weight: bold;
      }
      #close-popup {
        margin-top: 10px;
        margin-left: 120px;
      }
    }
    #popup-ul {
      margin-top: 50px;
      margin-bottom: 60px;
    }
  }
}
</style>
